<template>
  <div>
    <r-search
      ref="search"
      :searchData="searchData"
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :inline="true"
    />
    <div class="contentBattery">
      Total Employ Electric Quantity：
      <div class="contentBatterydiv">
        <span class="contentBatteryspan">{{ totalList + "kwh" || "--" }}</span>
      </div>
    </div>
    <r-table
      :isPagination="true"
      :isHandle="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="pagination"
      :loading="tableLoading"
      :tableHandles="tableHandles"
      :isSelection="false"
      @refresh="page()"
    />

    <r-form
      labelWidth="190px"
      :isHandle="true"
      :formRules="formRules"
      :formCols="formCols"
      :formHandle="formHandle"
      :formData="formData"
      ref="elForm"
      :inline="false"
      dialogWidth="650px"
    />
    <!-- Import抄表Record按钮的Template -->
    <Abnormal_record ref="Abnormal_record"></Abnormal_record>
  </div>
</template>
<script>
import Abnormal_record from "./cus/Abnormal_record";
export default {
  components: {
    Abnormal_record
  },
  data() {
    return {
      searchData: {
        deviceNo: ""
        // beginTime: '',
        // endTime: '',
      },
      searchForm: [
        {
          type: "input",
          placeholder: "Device Number",
          prop: "deviceNo",
          width: 180
        }
        // {
        //   type: "date", placeholder: "Start Time", prop: "beginTime", width: 180, change: (val) => { this.searchData.beginTime = val }
        // },
        // {
        //   type: "date", placeholder: "End Time", prop: "endTime", width: 180, change: (val) => { this.searchData.endTime = val }
        // },
      ],
      searchHandle: [
        {
          type: "primary",
          label: "Search",
          plain: true,
          handle: e => {
            this.zeroFn();
            this.getData();
          }
        }
      ],
      tableLoading: false,
      tableData: [],
      tableCols: [
        // { label: "设备ID", prop: "deviceId", },
        { label: "Device Number", prop: "deviceNo" },
        // {
        //   label: "昨日用电量",
        //   prop: "yesterdayElectric",
        //   formatter: e =>
        //     e.yesterdayElectric
        //       ? e.yesterdayElectric + "度"
        //       : e.yesterdayElectric === 0
        //         ? e.yesterdayElectric + "度"
        //         : "--"
        // },
        {
          label: "Total Electricity Consumption",
          prop: "electric",
          formatter: e =>
            e.electric
              ? e.electric + "kwh"
              : e.electric === 0
              ? e.electric + "kwh"
              : "--"
        },
        {
          label: "Meter Reading Power",
          prop: "recordElectric",
          formatter: e =>
            e.recordElectric
              ? e.recordElectric + "kwh"
              : e.recordElectric === 0
              ? e.recordElectric + "kwh"
              : "--"
        },
        { label: "Meter Reading Start Time", prop: "recordElectricBegin" },
        { label: "Meter Reading End Time", prop: "recordElectricEnd" },
        {
          label: "Operations",
          type: "button",
          width: 220,
          btnList: [
            {
              label: "Electricity Meter Reading",
              type: "primary",
              // icon: "el-icon-edit",
              plain: true,
              size: "mini",
              style: { "margin-bottom": "5px" },
              handle: async row => {
                this.$refs.elForm.dialogFormTitle = "Meter Reading";
                this.formData.deviceNo = row.deviceNo;
                this.formData.endTime = this.timeForMat(1);
                this.formData.beginTime = this.timeForMat(31);
                this.elFormVisible();

                //     const res = await this.apis.deviceElectricRecordElectric(this.searchData);
                // this.$message({
                //   type: res.code == 200 ? 'success' : "error",
                //   message: res.code == 200 ? 'success' : "error"
                // });
              }
            }
            // {
            //   label: "Meter Reading Record",
            //   type: "info",
            //   icon: "el-icon-document",
            //   plain: true,
            //   size: "mini",
            //   handle: row => {
            //     this.$refs.Abnormal_record.show_fun(row);
            //   }
            // }
          ]
        }
      ],

      tableHandles: [],
      pagination: { limit: 10, offset: 1, total: 0 },
      totalList: "",

      formData: {
        deviceNo: "",
        beginTime: "", //活动Start Time
        endTime: "" //活动End Time
      },

      formCols: [
        {
          type: "input",
          label: "Device Number",
          width: 350,
          prop: "deviceNo",
          placeholder: "Please Enter",
          isDisabled: () => {
            return true;
          }
        },
        {
          type: "dates",
          label: "Meter Reading Start Time",
          width: 350,
          prop: "beginTime"
        },
        {
          type: "dates",
          label: "Meter Reading End Time",
          width: 350,
          prop: "endTime"
        }
      ],
      formRules: {
        deviceNo: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        beginTime: [
          { required: true, message: "Please Enter", trigger: "blur" }
        ],
        endTime: [{ required: true, message: "Please Enter", trigger: "blur" }]
      },
      formHandle: [
        {
          label: "Cancel",
          icon: "el-icon-circle-close",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "primary",
          icon: "el-icon-circle-plus-outline",
          handle: e => this.elFormSubmit()
        }
      ]
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    zeroFn() {
      this.pagination.limit = 10;
      this.pagination.offset = 1;
      this.pagination.total = 0;
    },
    async getData() {
      let parm = {
        ...this.searchData,
        ...{
          pageNum: this.pagination.offset,
          pageSize: this.pagination.limit
        }
      };
      var res = await this.apis.deviceElectricVoList(parm);
      this.tableData = res.rows || [];
      this.totalList = res.params.toFixed(2) || "";
      this.pagination.total = res.total;
    },
    page() {
      this.getData();
    },
    // 抄表确定按钮
    elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async valid => {
        if (valid) {
          let res = await this.apis.deviceElectricRecordElectric(this.formData);
          this.$message({
            type: res.code == 200 ? "success" : "error",
            message: res.msg
          });
          this.elFormVisible();
          this.getData();
        }
      });
    },

    // 日期封装
    timeForMat(count) {
      let time1 = new Date();
      time1.setTime(time1.getTime() - 24 * 60 * 60 * 1000 * count);
      let Y2 = time1.getFullYear();
      let M2 =
        time1.getMonth() + 1 >= 10
          ? time1.getMonth() + 1
          : "0" + (time1.getMonth() + 1);
      let D2 = time1.getDate() >= 10 ? time1.getDate() : "0" + time1.getDate();
      // let timer1 = Y2 + '-' + M2 + '-' + D2 // 之前的7天或者30天
      let timer1 = `${Y2}-${M2}-${D2}`;
      return timer1;
    }
  }
};
</script>

<style scoped lang="scss">
.contentBattery {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 15px;
  width: 350px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  left: 0px;
  top: 0;
}

.contentBatterydiv {
  margin-left: 20px;
}

.contentBatteryspan {
  margin-right: 5px;
  color: #000cff;
}
</style>
